<template>
	<Layout :bstyle="{background:'white'}">
		<template #title>提现记录</template>
		<ScrollRefresher @refresh="refresh" @tolower="tolower">
			<view v-for="(item) of list" :key="item.index" class="iflex column aic fill">
				<view class="iflex aic date-info">{{item.yearMonth}}</view>
				<view v-for="ci of item.list" :key="ci.id" class="iflex column aic record-row">
					<view class="iflex aic jcsb fill record-row__header">
						<text>提现</text>
						<view class="iflex aic">-{{pennyToDollarFormat(ci.amount,true)}}</view>
					</view>
					<view class="iflex fill record-row__footer">{{ci.createTime}}</view>
				</view>
			</view>
		</ScrollRefresher>
	</Layout>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { getWithdrawRecordList } from '@/apis/withdraw';
	import { useGetDataPaging } from '@/hooks/paging';
	import { pennyToDollarFormat } from '@/utils/format';
	import dayjs from 'dayjs';
	let index = 0;
	const { list, refresh, tolower } = useGetDataPaging({
		api: getWithdrawRecordList,
		// api: () => {
		// 	// getWithdrawRecordList,
		// 	return Promise.resolve({
		// 		code: 200,
		// 		total: 8,
		// 		rows: [
		// 			{ id: 1001, amount: 1000, createTime: '2024-01-14 18:01:10' },
		// 			{ id: 1002, amount: 2000, createTime: '2024-01-14 17:01:10' },
		// 			{ id: 1003, amount: 3000, createTime: '2024-02-14 16:01:10' },
		// 			{ id: 1004, amount: 4000, createTime: '2024-05-14 15:01:10' },
		// 			{ id: 1005, amount: 5000, createTime: '2024-05-14 14:01:10' },
		// 			{ id: 1006, amount: 6000, createTime: '2024-07-14 13:01:10' },
		// 			{ id: 1007, amount: 16000, createTime: '2024-07-14 13:01:10' },
		// 			{ id: 1008, amount: 63000, createTime: '2024-09-14 13:01:10' },
		// 		]
		// 	})
		// },
		append: false,
		handlerData: (rows) => {
			for (const item of rows) {
				const yearMonth = dayjs(item.createTime).format('YYYY年MM月');
				let fym = list.value.find(fi => fi.yearMonth === yearMonth);
				if (!fym) {
					index++;
					fym = { index, yearMonth, list: [] };
					list.value.push(fym);
				}
				fym.list.push(item);
			}
			console.log(list.value);
		}
	})
	onLoad(() => {
		refresh();
	});
</script>

<style lang="scss">
	.date-info {
		width: 676rpx;
		padding: 50rpx 0 20rpx 0;
		color: #000000;
		font-size: 40rpx;
		font-weight: 600;
		line-height: normal;
	}

	.record-row {
		width: 676rpx;
		// height: 134rpx;
		padding: 30rpx 0 44rpx 0;
		border-bottom: 1px solid #0000000d;

		&__header {
			color: #000000;
			font-size: 32rpx;
			font-weight: 500;
		}

		&__footer {
			margin-top: 10rpx;
			color: #737d91;
			font-size: 26rpx;
			font-weight: 400;
		}
	}
</style>